<template>
  <!-- 安装方式弹框 -->
  <view class="install-mode-popup">
    <view class="title">请选择安装方式</view>
    
    <view class="select-box">
      <view class="tag-box">
        <view
          v-for="(item, index) in modes"
          :key="item.id"
          :class="['tag', modeVal.id === item.id ? 'is-active':'']"
          @click="selected(item, index)"
        >
          {{ item.name }}
        </view>
      </view>
      
      <view class="tips">*无需安装，不含安装服务</view>
      
      <view class="btn-box">
        <button class="btn-bg-yellow btn" @click="confirm()">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 安装方式
        modes: [
          { name: '到店安装', id: 1 },
          { name: '无需安装', id: 2 },
        ],
        modeVal: { name: '到店安装', id: 1 }
      }
    },
    
    methods: {
      // 选择安装方式
      selected(item, i) {
        this.modeVal = item
      },
      
      confirm() {
        this.$emit('change', this.modeVal)
      }
    }
  }
</script>

<style lang="scss" scoped>
.install-mode-popup {
  .title {
    padding: 33rpx 0;
    border-bottom: 1px solid #eee;
    font-size: 32rpx;
    color: #333;
    text-align: center;
  }
}

.select-box {
  .tag-box {
    padding: 45rpx 40rpx;
    
    .tag {
      display: inline-block;
      padding: 12rpx 40rpx;
      background: #F6F6F6;
      border: 1px solid #E1E1E1;
      border-radius: 10rpx;
      color: #666;
      font-size: 30rpx;
      transition: all .2s;
      
      &.is-active {
        color: #FBB000;
        background: #FFFBE5;
        border-color: #FBB000;
      }
      
      & + .tag {
        margin-left: 40rpx;
      }
    }
  }
  
  .tips {
    padding: 0 40rpx;
    color: #999999;
    font-size: 26rpx;
  }
}

.btn-box {
  padding: 26rpx 24rpx 40rpx;
  font-size: 0;
  
  .btn {
    width: 100%;
    height: 88rpx;
    margin: 0;
    line-height: 88rpx;
    font-size: 30rpx;
    color: #333;
    
    &::after {
      border: 0;
    }
  }
}
</style>
